<template>
  <div class="fu">
    <div class="left">
      <i class="el-icon-s-claim"></i>
      <span>授课查询</span>
    </div>
    <div style="clear: left"></div>
    <div class="wai-bord">

      <el-form :inline="true" :model="pageList" class="demo-form-inline right">

        <el-form-item>
          <el-input v-model="pageList.cname" placeholder="课程名"></el-input>
        </el-form-item>

        <el-form-item>
          <el-input v-model="pageList.tname" placeholder="讲师名"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <div style="clear: right"></div>

      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :page-size="pageList.pageSize"
        :total="pageList.total">
      </el-pagination>

      <el-row>
        <el-col :span="24">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">

            <el-table-column
              prop="courseId"
              label="选课ld">
            </el-table-column>

            <el-table-column
              prop="courseName"
              label="课程名">
            </el-table-column>

            <el-table-column
              prop="courseGrade"
              label="年级">
            </el-table-column>

            <el-table-column
              prop="courseCredit"
              label="学分">
            </el-table-column>

            <el-table-column
              prop="courseTime"
              label="上课时间">
            </el-table-column>

            <el-table-column
              prop="courseLocation"
              label="上课地点">
            </el-table-column>

            <el-table-column
              prop="courseSelectedCount"
              label="选课人数">
            </el-table-column>

          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {deletefn, get, post, update} from "../../common/request";

  export default {
    name: "TeacherCourse",
    data() {
      return {
        tableData: [
          {
            courseId: 1,
            courseName: '',
            courseGrade: '',
            courseCredit: '',
            courseTime: '',
            courseLocation: '',
            courseSelectedCount: ''
          }
        ],
        pageList: {
          currentPage: 1,
          pageSize: 8,
          total: 0,
          cname: '',
          tname: ''
        }
      }
    },

    mounted() {
      this.getAll();
    },
    methods: {
      getAll() {
        get("/course/getTeacherCourse", this.pageList).then(res => {
          this.tableData = res.data.list;
          this.pageList.currentPage = res.data.currentPage;
          this.pageList.pageSize = res.data.pageSize;
          this.pageList.total = res.data.total;
        })
      },
      handleCurrentChange(val) {
        this.pageList.currentPage = val;
        this.getAll();
      },
      onSubmit() {
        this.getAll();
      }
    }
  }
</script>

<style scoped>

  .left {
    float: left;
    font-size: 14px;
    color: #606266;
    margin-bottom: 5px;
  }

  .wai-bord {
    background-color: white;
    border: #dcdfe6 solid 1px;
    border-radius: 3px;
    padding: 5px 15px;
  }

  .right {
    float: right;
  }
</style>
